<template>
  <div style="overflow: auto">
    <div class="header">
      <el-form inline>
        <el-form-item label="项目名">
          <el-input v-model="searchName"></el-input>
        </el-form-item>

        <el-button @click="doGetProjects()">搜索</el-button>
        <el-button
          type="primary"
          @click="
            addProjectVis = true
            isEdit = false
            addProject = {}
          "
        >
          添加
        </el-button>
      </el-form>
    </div>
    <div class="container">
      <el-table :data="projects">
        <el-table-column
          width="80"
          label="编号"
          prop="DSSP_ID"
        ></el-table-column>
        <el-table-column label="名称" prop="DSSP_Name"></el-table-column>
        <el-table-column
          label="关联案件"
          prop="CS_DisplayName"
        ></el-table-column>
        <el-table-column
          width="180"
          label="施工单位"
          prop="DSSP_SurveyCompany"
        ></el-table-column>
        <el-table-column width="240" label="施工阶段">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.DSSP_HasBefore">施工前</el-tag>
            <el-tag v-if="scope.row.DSSP_HasAfoot">施工中</el-tag>
            <el-tag v-if="scope.row.DSSP_HasAfter">施工后</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          label="创建人"
          prop="USR_Name"
        ></el-table-column>
        <el-table-column
          label="更新时间"
          prop="DSSP_UpdateTime"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="
                addProjectVis = true
                addProject = scope.row
                isEdit = true
              "
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-map-location"
              @click="toMap(scope.row)"
              circle
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-monitor"
              circle
              @click="toShowPage(scope.row)"
              round
            ></el-button>

            <el-button
              type="info"
              icon="el-icon-more"
              circle
              @click="toDetailPage(scope.row)"
              round
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="doDeleteProject(scope.row.DSSP_ID)"
              round
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="pageIndex"
        :total="total"
        :page-size.sync="pageSize"
        :page-sizes="[10, 20]"
        @size-change="
          (val) => {
            pageSize = val
            doGetProjects()
          }
        "
        @current-change="doGetProjects()"
      />
    </div>
    <el-dialog title="大屏链接" :visible.sync="bigdataVisible">
      <div>
        电脑端链接：
        <el-link :href="bigDataPath" target="_blank">{{ bigDataPath }}</el-link>
      </div>
      <div style="margin-top: 10px">
        移动端链接：
        <el-link :href="bigDataPhonePath" target="_blank">
          {{ bigDataPhonePath }}
        </el-link>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bigdataVisible = false">
          确 定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增项目" :visible.sync="addProjectVis">
      <el-form ref="form" :model="addProject" label-width="80px">
        <el-form-item label="关联案件">
          <el-select
            v-model="addProject.DSSP_CaseID"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词搜索"
            :remote-method="getCases"
            :loading="loading"
          >
            <el-option
              v-for="item in cases"
              :key="item.CS_ID"
              :label="'[' + item.CS_ID + ']' + item.CS_DisplayName"
              :value="item.CS_ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="addProject.DSSP_Name"></el-input>
        </el-form-item>
        <el-form-item label="施工单位">
          <el-input v-model="addProject.DSSP_SurveyCompany"></el-input>
        </el-form-item>
        <el-form-item label="施工阶段">
          <el-checkbox
            v-model="addProject.DSSP_HasBefore"
            label="施工前"
            name="type"
          ></el-checkbox>
          <el-checkbox
            v-model="addProject.DSSP_HasAfoot"
            label="施工中"
            name="type"
          ></el-checkbox>
          <el-checkbox
            v-model="addProject.DSSP_HasAfter"
            label="施工后"
            name="type"
          ></el-checkbox>
        </el-form-item>
        <el-form-item label="选择地图">
          <el-select v-model="addProject.DSSP_SurveyMapID" placeholder="请选择">
            <el-option
              v-for="item,index in maps"
              :key="item.DSSM_ID"
              :label="item.DSSM_Name"
              :value="item.DSSM_ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地图ID">
          <el-input v-model="addProject.DSSP_MapID"></el-input>
        </el-form-item>

        <el-form-item label="坐标系">
          <el-input v-model="addProject.DSSP_MapCRS"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="addProject.DSSP_Remark"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addProjectVis = false">取 消</el-button>
        <el-button type="primary" @click="doAddProject">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { baseURL } from '@/config'
import {
  AddSurveyProject,
  UpdateSurveyProject,
  GetSurveyProjects,
  DeleteSurveyProject,
  GetSurveyMapList
} from '@/api/project/survey.js'
import { getEmployees } from '@/api/flowCenter/field/employeeSelection'
import { getCases } from '@/api/flowCenter/field/caseSelection'
export default {
  components: {},
  computed: {
    ...mapGetters({
      curEmp: 'user/curEmp',
    }),
  },
  data: function () {
    return {
      searchName: null,
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      projects: [],

      addProjectVis: false,
      addOpUserVis: false,
      bigdataVisible: false,

      bigDataPhonePath: '',
      bigDataPath: '',

      addProject: {},
      isEdit: false,
      employees: [],
      loading: false,
      selectEmps: [],

      cases: [],
      selectCase: {},
      maps:[],
      selectMap:0
    }
  },
  methods: {
    doGetEmployees(val) {
      getEmployees({
        cmpId: this.curEmp.EMP_CmpId,
        keyword: val,
      }).then(({ data }) => {
        this.employees = data
        this.loading = false
      })
    },
    doGetSurveyMapList() {
      GetSurveyMapList().then(({ data }) => {
        this.maps = data
        if(data.length>0){
          this.addProject.DSSP_SurveyMapID=data[0].DSSM_ID
        }
        
      })
    },
    doAddProject() {
      var that = this
      //this.addProject.DSSP_SurveyMapID=this.selectMap
      if (!this.isEdit) {
        AddSurveyProject(that.addProject).then((r) => {
          that.addProjectVis = false

          that.doGetProjects()
        })
      } else {
        UpdateSurveyProject(that.addProject).then((r) => {
          that.addProjectVis = false
          that.doGetProjects()
        })
      }
    },
    doDeleteProject(id) {
      var that = this
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          DeleteSurveyProject(id).then((r) => {
            that.doGetProjects()
          })
        })
        .catch(() => {})
    },
    toDetailPage(row) {
      this.$router.push({
        path: 'survey',
        query: { id: row.DSSP_ID },
      })
    },
    toShowPage(row) {
      this.bigDataPath =
        baseURL + '/show/survey.html?prjId=' + row.DSSP_ID + '&stepId=1'
      this.bigDataPhonePath =
        baseURL + '/show/survey/msurvey.html?prjId=' + row.DSSP_ID + '&stepId=1'

      this.bigdataVisible = true
      //window.open(path)
    },
    doGetProjects() {
      GetSurveyProjects(this.pageIndex, this.pageSize, this.searchName).then(
        (r) => {
          this.total = r.data.total
          this.projects = r.data.datas
        }
      )
    },
    toMap(row) {
      this.$router.push({
        path: 'surveyMap',
        query: { id: row.DSSP_ID },
      })
    },
    doAddOpUser() {
      if (this.addUserId == null) {
        this.$message('请选择要添加的用户')
        return
      }
      var data = {
        DSSOU_ProjectID: this.addProjectId,
        DSSOU_User: this.addUserId,
      }
      var that = this
      AddSurveyOpUser(data).then((r) => {
        that.doGetOpUser(that.addProjectId)
        this.addUserId = null
      })
    },
    doGetOpUser(prjId) {
      var that = this
      GetSurveyOpUser(prjId).then(({ data }) => {
        that.opUsers = data.data
      })
    },
    handleDelOpUser: function (userId) {
      var that = this
      this.$alert('确认要删除该勘查人员吗', '删除勘查人员', {
        confirmButtonText: '确定',
        callback: (action) => {
          DeleteSurveyOpUser(userId, that.addProjectId).then(({ data }) => {
            that.doGetOpUser(that.addProjectId)
          })
        },
      })
    },
    getCases(keyword) {
      if (keyword.length >= 2) {
        this.loading = true
        getCases({ keyword }).then(({ data }) => {
          this.cases = data
          this.loading = false
        })
      }
    },
  },
  mounted: function () {

    this.doGetSurveyMapList()
    this.doGetProjects()
  },
}
</script>

<style scoped>
.header {
  padding: 20px;
}
.container {
  padding: 20px 10px;
}
.upload {
  margin-right: 15px;
}
</style>
